import React, { forwardRef, useState, useImperativeHandle } from 'react';
// useImperativeHandle hook函数
// 作用: 当父组件通过ref 访问子组件上的数据和方法时, 使用useImperativeHandle 这个hook 
// 可以将子组件上的数据和方法暴露给父组件, 这样就可以在父组件中调用和访问子组件上的方法和数据了

const Child = (props, ref) => {
    const [Teacher, setTeacher] = useState('水庆霞');

    // 抛出方法
    // useImperativeHandle(ref,()=>{return {对象中就是要抛出的数据和方法}})
    useImperativeHandle(ref, () => {
        return {
            Teacher,
            editTeacher
        }
    })

    // 定义一个函数修改 Teacher 
    const editTeacher = () => {
        setTeacher('孙雯')
    }
    return (
        <div>
            <p>我是子组件--{Teacher}</p>
        </div>
    );
}

export default forwardRef(Child);
